import styled from 'styled-components';

import Navbar from "../common/navbar/navbar";
import { Swiper, Toast, Image, Button } from "antd-mobile";
import News from "./component/news";
import Cates from './component/cates'

const Contianer = styled.div`
& {
  .body {
    max-height: calc(100vh - 95px);
    overflow-y: scroll;
    background: #fff;
    .title {
        font-weight: bold;
        font-size: 18px;
        text-align: left;
        margin: 12px 0;
      }
    .banner {
      .adm-image {
        width: auto;
        height: 140px;
      }
    }

    .hots {
      padding: 0 12px;
      overflow: hidden;
      margin-top: 20px;
        .item {
          width: 100%;
          height: 200px;
          display: flex;
          flex-flow: column;
          .img {
            width: 100%;
            height: 150px;
            object-fit: fill;
          }
          .opt {
            text-align: center;
            .btn {
              width: 50%;
            }
          }
        }
        .customStyle {
          .adm-swiper-indicator {
            bottom: 55px;
          }
          .adm-page-indicator-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
          }
        }
    }


  }
}
`;

const items = [
  {src: require('../../static/banner/banner1.jpg')},
  {src: require('../../static/banner/banner2.jpg')},
  {src: require('../../static/banner/banner3.jpg')},
]


const homeActivities = [
  {title: '活动1', image: require('../../static/img/a1.png')},
  {title: '活动2',image: require('../../static/img/a2.png')},
  {title: '活动3',image: require('../../static/img/a3.png')},
  {title: '活动4',image: require('../../static/img/a4.png')},
  {title: '活动5',image: require('../../static/img/a5.png')},
]

// banner走马灯
const swiperItem = items.map((e, index) => (
  <Swiper.Item key={index}>
    <div className="content" onClick={() => {
      Toast.show(`点击了${index + 1}`)
    }}>
      <Image src={e.src} fit='fill'></Image>
    </div>
  </Swiper.Item>
))



// 热门活动
const hotItem = homeActivities.map((e, index) => (
  <Swiper.Item key={index}>
    <div className="item">
      <img className="img"  onClick={() => todetail(e,index)} src={e.image} alt="" />
      <span>{e.title}</span>
      <div className="opt">
        <Button className="btn" onClick={() => todetail(e,index)} size="mini" color='primary'>立即参与</Button>
      </div>
    </div>
  </Swiper.Item>
))



function todetail() {
  console.log(arguments);
}

function Home() {
  return (
    <Contianer className="App">
      <div className="body">
        <div className="banner">
          <Swiper>{swiperItem}</Swiper>
        </div>
        <Cates />
        <div className="hots">
          <div className="title">热门活动</div>
          <div className="list">
            <Swiper className="customStyle" slideSize={70} trackOffset={15} loop stuckAtBoundary={false}>{hotItem}</Swiper>
          </div>
        </div>
        <News />
      </div>
    </Contianer>
  );
}

export default Home;
